<template>
<div  class="mid">
<!--  头部-->
 <div class="backgroundImg" :style="{'background-image': `url(${songDetail.songinfo?songDetail.songinfo.pic_premium:''})`}"></div>
   <div class="title">
    <router-link to="/"><van-icon name="wap-home-o"  color="red" size="30"/></router-link>
    <b>{{songDetail.songinfo.title}}</b>
    <router-link to="/search"><van-icon name="search" size="30"/></router-link>
   </div>
   <!--  歌词-->
   <div class="middle">
     <!--    图片-->
     <div class="pic" :style="{'animation-play-state':animationPlayState}"><img @click="turn" :src="songDetail.songinfo.pic_radio" alt="">
     </div>
     <!--  歌词-->
     <div class="song">
       <ul ref="list">
         <li v-for="(item,index) in lrcContent" :key="index" :class="index == active?'active1':''" @click="changeSong(item.time)">{{item.content}}</li>

       </ul>
     </div>
   </div>
   <!--  音频-->
   <div class="bottom">
     <div class="bottomIcon">
       <van-icon name="like-o" v-show="isLike" @click="collect"/>
       <van-icon name="like" color="red" v-show="!isLike" @click="Collect"/>

       <a  :href="songDetail.songinfo.lrclink"> <van-icon name="down" /></a>
     </div>

     <div class="audio">
       <audio ref="audio" :src="songDetail.bitrate.show_link" controls ></audio>
     </div>

  </div>
</div>
</template>

<script>

import { Toast } from 'vant';
import { Dialog } from 'vant';
import {getMusicPlay} from "@/api/api";

  export default {
name: "musicPlay",
  data(){
  return{
    animationPlayState:"paused",
    songDetail:{songinfo:"",bitrate:""},
    isLike:true,
    content: "[ti:大鱼]\r\n[ar:周深]\r\n[al:大鱼]\r\n[by:0]\r\n[offset:0]\r\n[00:02.27]大鱼 (《大鱼海棠》动画电影印象曲) \r\n[00:02.94]\r\n[00:03.63]作词：尹约\r\n[00:04.32]作曲：钱雷\r\n[00:04.91]演唱：周深\r\n[00:05.49]\r\n[00:43.27]海浪无声将夜幕深深淹没\r\n[00:50.09]漫过天空尽头的角落\r\n[00:56.79]大鱼在梦境的缝隙里游过\r\n[01:03.76]凝望你沉睡的轮廓\r\n[01:09.88]看海天一色 听风起雨落\r\n[01:16.48]执子手吹散苍茫茫烟波\r\n[01:23.61]大鱼的翅膀 已经太辽阔\r\n[01:31.09]我松开时间的绳索\r\n[01:37.30]怕你飞远去 怕你离我而去\r\n[01:43.87]更怕你永远停留在这里\r\n[01:50.76]每一滴泪水 都向你流淌去\r\n[01:58.58]倒流进天空的海底\r\n[02:04.68]\r\n[02:19.11]海浪无声将夜幕深深淹没\r\n[02:25.86]漫过天空尽头的角落\r\n[02:32.76]大鱼在梦境的缝隙里游过\r\n[02:39.58]凝望你沉睡的轮廓\r\n[02:45.63]看海天一色 听风起雨落\r\n[02:52.41]执子手吹散苍茫茫烟波\r\n[02:59.30]大鱼的翅膀 已经太辽阔\r\n[03:07.08]我松开时间的绳索\r\n[03:13.09]看你飞远去 看你离我而去\r\n[03:19.86]原来你生来就属于天际\r\n[03:26.68]每一滴泪水 都向你流淌去\r\n[03:34.51]倒流回最初的相遇\r\n[03:44.44]\r\n",
    lrcContent:[],
    currentTime:0,
    active:0,
    noScroll:false,
    collectList:[]
  }
  },
  created(){
    this.collectList = JSON.parse(localStorage.getItem("coll")) || [];
    if (this.collectList.some(item=>item===this.$route.query.songid)){
      this.isLike = true;
    }
    //获取到页面数据

  getMusicPlay(this.$route.query.songid).then(res=>{
    console.log(res);
    this.songDetail=res
  })
    // 处理歌词
    let lyrice = this.content.split("\r\n");
    console.log(lyrice);
    let reg = /\[\d*:\d*.\d*\]/g;
  lyrice.forEach(item=>{
    // console.log(item)
    let content = item.match(reg)
    if(content){
      content.forEach(timeItem=>{
        let min = Number(timeItem.match(/\[\d*/)[0].replace('[',''));
        let sec = Number(timeItem.match(/:\d*/)[0].replace(':',''));
        let time = min * 60 + sec;
            let contentStr = item.replace(reg,'');
        if(contentStr){
          this.lrcContent.push({
            time:time,
            content: contentStr
          })
        }
      })
    }
  })
  },
  watch:{
    currentTime() {
      for (let i = 0; i < this.lrcContent.length; i++) {
        if (this.lrcContent[i].time > this.currentTime) {
          if (i > 0) {
            this.active = i - 1;
          }

          if (!this.noScroll) {
            this.$refs.list.scrollTop = this.$refs.list.children[this.active].offsetTop - 50 ;


            console.log(this.$refs.list.children[this.active].offsetTop)
          }
          break;
        }
      }
    }
  },
  methods:{
    turn(){
      // this.animationPlayState="running"
      this.animationPlayState="pause"
    },
    collect(){
      this.isLike=!this.isLike
      Toast.success('收藏成功')
      if(!this.collectList.some(item=>item===this.$route.query.songid)) {
        this.collectList.push(this.$route.query.songid);
        localStorage.setItem("coll", JSON.stringify(this.collectList))
      }
      },
    Collect(){

      Dialog.confirm({
        title: '提示信息',
        message: '您确定要取消收藏吗',
      })
          .then(() => {
            // on confirm
            this.isLike=!this.isLike
            this.collectList = this.collectList.filter(item => item!= this.$route.query.songid);
            localStorage.setItem("coll",JSON.stringify(this.collectList))
          })
          .catch(() => {
            // on cancel
          });
    },
      //    点击改变音乐进度
    changeSong(time){
      this.$refs.audio.currentTime = time
    }
  },

  mounted(){



      // console.log(this.$refs.audio)
      // eslint-disable-next-line no-debugger
      // debugger
    // 播放进度
      this.$refs.audio.addEventListener("timeupdate",()=>{
      // console.log(this.$refs.audio.currentTime)
       this.currentTime = this.$refs.audio.currentTime
    });
    this.$refs.audio.addEventListener("play",()=>{
      this.animationPlayState='running';
      console.log(this.animationPlayState)
    });
    this.$refs.audio.addEventListener("pause",()=>{
      this.animationPlayState='paused';
    })
    this.$refs.list.addEventListener("touchstart", () => {
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }
      this.noScroll = true;
    });
    this.$refs.list.addEventListener("touchend", () => {
      this.timeoutId = setTimeout(() => {
        this.noScroll = false
      }, 2000)
    });

  }
}
</script>

<style scoped lang="less">
  .mid{
    width: 100%;
    height: 100vh;
    .backgroundImg {
      background-repeat: no-repeat;
      background-position: -100px;
      background-size: auto 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
      opacity: 0.5;
    }

    .title{
      display: flex;
      justify-content: space-between;
      justify-items: center;
      padding: 6px;
      b{
        font-size: 20px;
      }
    }
    .pic{
      display: flex;
      justify-content: center;
      margin: 30px 0;
      animation: spin 12s linear infinite;
      animation-play-state:paused;
      //animation-play-state:running;
      img{
        width: 60%;
        height: 60%;
        border-radius: 50%;
      }
    }
    .song {
      display: flex;
      justify-content: center;
      ul{
        position: relative;
        overflow: scroll;
        height: 150px;
      }
      li{
        text-align: center;
      }
    }
    .bottomIcon{
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      margin: 15px 0;
      font-size: 20px;
    }
    .audio {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
    }
    @-webkit-keyframes spin {
      to {
        transform: rotate(1turn);
      }
    }
    .active1 {
      color: #ff0000;
      font-size: 18px;
    }
  }
</style>